<template>
    <p class="hello">
    <p v-for='item in showList' class="showListp">
    <div class="showLists">{{item}}</div>
    </p>
    <p @click="showAll = !showAll" class="show-more">{{word}}</p>
    </p>
</template>

<script>
    export default {
        name: "MoreWch",
        data() {
            return {
                toLearnList: [
                    '红包', '代金券', '津贴', '我的收藏', '企业用餐', '发票助手', '管理地址'
                ],
                showAll: false,
            }

        },
        computed: {
            showList: function () {
                if (this.showAll == false) {          //当数据不需要完全显示的时候
                    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
                    if (this.toLearnList.length > 0) {　　　　　　　//这里我们先显示前三个
                        for (var i = 0; i > 0; i--) {
                            showList.push(this.toLearnList[i])
                        }
                    } else {
                        showList = this.toLearnList
                    }
                    return showList;　　　　　　　　　　　　　　 //返回当前数组
                } else {
                    return this.toLearnList;
                }
            }
            ,
            word: function () {
                if (this.showAll == false) {　　　　　　　　　　　//对文字进行处理
                    return '更多'
                } else {
                    return '收起'
                }
            }
        }
    }
</script>

<style scoped>
    .hello {
        width: 84px;
        height: 326px;
        position: fixed;
right: 0px;        bottom: -18px;
        z-index: 3;
        text-align: center;
    }

    .show-more {
        position: fixed;
        right:8%;
        bottom: -16px;
        z-index: 3;
    }

    .showLists {
        height: 35px;
        width: 80px;
        margin:0 2px;
        line-height: 35px;
    }

    .showListp {
        margin: 0 auto;
        background-color: white;
        border: 1px solid #d4d4d4;

    }
</style>